<template>
	<view class="custom_popup" :class="{ popup_show: showPopup }">
		<view class="popup_mask" @click="bangCancel"></view>
		<view class="popup_content">
			<text class="popup_share_title">{{title}}</text>
			<view class="picker">
				<picker-view :indicator-style="indicatorStyle" :value="defualVal" @change="bindChange"
					class="picker-view">
					<picker-view-column v-for="(items,idx) in ranges" :key="idx">
						<view class="item" v-for="(item,index) in items" :key="index">{{item.txt}}</view>
					</picker-view-column>
					<!-- <picker-view-column>
						<view class="item" v-for="(item,index) in items" :key="index">{{item}}</view>
					</picker-view-column> -->
				</picker-view>
			</view>
			<!-- <view v-else class="no-content">
					<text>无相关数据</text>
				</view>> -->
			<view class="popup_share_btn">
				<text class="" @click="bindConfirm">确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryOrg
	} from '../../common/api/index.js'
	import {
		_showToast,
		_showLoading
	} from '../../common/js/util.js'
	/**
	 * @Author: NXJ
	 */
	export default {
		name: 'CustomTabs',
		props: {
			value: {
				type: [Boolean, String],
				default: false
			},
			ranges: {
				type: Array,
				default: () => {
					return []
				}
			},
			title: {
				type: String,
				default: '请选择'
			},
			parentId: {
				type: [Number, String],
				default: '45'
			},
			dataVal: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				showPopup: false,
				popupTitle: '请选择',
				timer: null,
				indexValue: '',
				indicatorStyle: `height: 50px;`,
				changeData: [],
				defualVal: [0, 0]
			};
		},
		watch: {
			value(newVal) {
				this.showPopup = newVal
			},
			title(newTitle) {
				this.popupTitle = newTitle
			},
			showPopup(newVal) {
				this.$emit("input", newVal);
			},
			ranges(newVal) {
				this.changeData = [this.ranges[0][this.defualVal[0]], this.ranges[1][this.defualVal[1]]]
			},
			dataVal(newVal) {
				// this.defualVal = newVal
				this.bindChange({
					detail: {
						value: newVal
					}
				})
			}
		},
		mounted() {},
		methods: {
			bindChange(e) {
				console.log(e)

				this.defualVal = e.detail.value
				let lv2Index = e.detail.value[0]
				this.changeData = [this.ranges[0][lv2Index]]
				console.log(this.changeData, this.ranges)
				this.$emit('change', this.changeData)
			},
			bindConfirm(e) {
				this.showPopup = false
				console.log(this.changeData[0].empName)
				this.$emit('confirm', this.changeData)
			},
			bangCancel(e) {
				console.log("这里")
				this.showPopup = false
				this.$emit('cancel', this.changeData)
			}
		}
	}
</script>

<style lang="scss">
	.custom_popup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		display: none;

		&.popup_show {
			display: block;
		}

		.popup_mask {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba($color: #000000, $alpha: 0.3);
		}

		.popup_content {
			// height: 90%;
			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0;
			flex-direction: column;
			background-color: #FFF;
			border-top-right-radius: 36upx;
			border-top-left-radius: 36upx;
		}

		.schoolList {
			width: 100%;
			height: calc(100% - 300rpx);

			.no-content {
				padding: 100rpx 24rpx;
				text-align: center;
				color: #999;
				font-size: $font-size-base;
			}
		}

		.popup_share_btn,
		.popup_share_title {
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.popup_share_btn {
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;

			text {
				width: 50%;
			}
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		line-height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>